<template>
    <el-dialog v-model="printOWNOutboundVisible" :show-close="false" fullscreen @open="initPrintEvent">
        <!-- 自定义头部 -->
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">打印出库单 -- ESC关闭</h4>
                <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
                    关闭
                </el-button>
            </div>
        </template>

        <!-- 自定义内容 -->
        <div class="flex flex-wrap justify-center">
            <!-- 自定义打印内容 -->
            <div class="flex flex-wrap">
                <!-- 打印选项组 -->
                <div class="flex m-auto mb-6">
                    <el-checkbox-group v-model="checkList" @change="handleOptionsChange">
                        <el-checkbox
                            v-for="(item, index) in allList"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled"
                        />
                    </el-checkbox-group>
                    <el-date-picker class="ml-5" v-model="printTime" type="datetime" placeholder="选择日期和时间" />
                </div>

                <!-- 打印送货单内容 -->
                <div id="print-container">
                    <!-- 检测报告二维码 -->
                    <canvas width="20" height="20" id="qr-factory-inspection-report" v-show="checkListChecked('qrcode')"></canvas>
                    <!-- 表格抬头 -->
                    <div class="print-title">{{ useSystem.print.OWNprint.companyName }}</div>
                    <div class="print-subtitle">送货单</div>
                    <div class="print-info-first">
                        <div>客户名称：{{ customerName }}</div>
                        <div>开单时间：{{ formatTimeZone(printTime, 'YYYY-MM-DD HH:mm:ss') }}</div>
                    </div>
                    <div class="print-info-second">
                        <div>客户地址：{{ customerAddress }}</div>
                        <div :class="customerPhone == '' ? 'noCustomerPhone' : ''">联系方式：{{ customerPhone }}</div>
                    </div>
                    <!-- 表格内容 -->
                    <table class="print-table">
                        <!-- 表头 -->
                        <thead>
                            <tr>
                                <th scope="col" v-if="checkListChecked('priority')">编号</th>
                                <th scope="col" v-if="checkListChecked('orderNo')">订单号</th>
                                <th scope="col" v-if="checkListChecked('meterialNumber')">物料号</th>
                                <th scope="col" v-if="checkListChecked('productName')">产品名称</th>
                                <th scope="col" v-if="checkListChecked('productSize')">产品尺寸</th>
                                <th scope="col" v-if="checkListChecked('orderNumber')">订单数量</th>
                                <th scope="col" v-if="checkListChecked('deliveryQuantity')">送货数量</th>
                                <th scope="col" v-if="checkListChecked('unit')">单位</th>
                                <th scope="col" v-if="checkListChecked('price')">单价</th>
                                <th scope="col" v-if="checkListChecked('price')">金额</th>
                                <th scope="col" v-if="checkListChecked('remark')">备注</th>
                            </tr>
                        </thead>
                        <!-- 表格数据 -->
                        <tbody>
                            <tr v-for="(item, index) in printData!.orderData" :key="index">
                                <!-- 编号 -->
                                <td v-if="checkListChecked('priority')">{{ index + 1 }}</td>
                                <!-- 订单号 -->
                                <td v-if="checkListChecked('orderNo')">{{ item.orderNo }}</td>
                                <!-- 物料号 -->
                                <td v-if="checkListChecked('meterialNumber')">{{ item.materialNumber }}</td>
                                <!-- 产品名称 -->
                                <td v-if="checkListChecked('productName')">{{ item.productName }}</td>
                                <!-- 产品尺寸 -->
                                <td v-if="checkListChecked('productSize')">
                                    {{ item.productSize == '' && item.productName !== '' ? '/' : item.productSize }}
                                </td>
                                <!-- 订单数量 -->
                                <td v-if="checkListChecked('orderNumber')">{{ item.orderNumber == 0 ? '' : item.orderNumber }}</td>
                                <!-- 送货数量 -->
                                <td v-if="checkListChecked('deliveryQuantity')">{{ item.deliveryQuantity == 0 ? '' : item.deliveryQuantity }}</td>
                                <!-- 单位 -->
                                <td v-if="checkListChecked('unit')">{{ item.unit }}</td>
                                <!-- 单价 -->
                                <td v-if="checkListChecked('price')">{{ item.price == 0 ? '' : item.price }}</td>
                                <!-- 金额 -->
                                <td v-if="checkListChecked('price')">{{ item.subtotal == 0 ? '' : item.subtotal }}</td>
                                <!-- 备注 -->
                                <td v-if="checkListChecked('remark')">{{ item.remark }}</td>
                            </tr>
                            <tr v-if="checkListChecked('price')">
                                <td colspan="2">总计：</td>
                                <td class="price-capital-letters" :colspan="priceColumn">
                                    ¥：{{
                                        Number(printData.orderData.reduce((p, c) => (p += c.subtotal), 0).toFixed(2)) +
                                        `（大写金额:${Nzh.toMoney(Number(printData.orderData.reduce((p, c) => (p += c.subtotal), 0).toFixed(2)))}）`
                                    }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- 表格底部 -->
                    <div class="print-info-third">
                        <div>第一联：存根（白）</div>
                        <div>第二联：客户（红）</div>
                        <div>第三联：结算（黄）</div>
                    </div>
                    <!-- 底部信息 -->
                    <div class="print-info-fourth">
                        <div>签收日期：</div>
                        <div>签收人：</div>
                    </div>
                </div>

                <!-- 打印按钮 -->
                <div class="m-auto flex mt-6 mb-6">
                    <el-button type="primary" @click="printDeliveryEvent">打印送货单</el-button>
                    <el-button type="primary" @click="printFactoryInspectionReportEvent" :disabled="!showFactoryInspectionReport">
                        打印检测单
                    </el-button>
                    <el-switch
                        class="ml-3"
                        v-model="showFactoryInspectionReport"
                        inline-prompt
                        active-text="展示出厂报告"
                        inactive-text="隐藏出厂报告"
                    />
                    <el-dropdown>
                        <el-button type="primary" class="ml-3">
                            生成产品标签
                            <el-icon><ArrowDown /></el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <!--  -->
                                <el-dropdown-item>
                                    <el-button type="primary" @click="printProductLabelEvent(true)">同产品合并</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button type="primary" @click="printProductLabelEvent(false)" disabled>同产品分开</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>

            <!-- 自定义出厂报告 -->
            <div v-show="showFactoryInspectionReport" id="print-factory-inspection-report">
                <!-- 出厂报告表 -->
                <table>
                    <tbody>
                        <!-- 标题 -->
                        <tr>
                            <th class="report-title" colspan="7">{{ useSystem.print.OWNprint.companyName }}</th>
                        </tr>
                        <!-- 副标题 -->
                        <tr>
                            <th class="report-subtitle" colspan="7">出厂检验报告</th>
                        </tr>
                        <!-- 出厂检测报告编号 -->
                        <tr class="report-No">
                            <td colspan="7">编号：{{ factoryInspectionReportNo }}</td>
                        </tr>
                        <!-- 内容标题 -->
                        <tr>
                            <td>客户名称：</td>
                            <td colspan="3">{{ customerName }}</td>
                            <td>生产日期</td>
                            <td colspan="2">
                                {{
                                    props.ownData!.report
                                        ? dayjs(props.ownData!.deliveryDate).subtract(1, 'days').format('YYYY-MM-DD')
                                        : dayjs().subtract(1, 'days').format('YYYY-MM-DD')
                                }}
                            </td>
                        </tr>
                        <!-- 内容抬头 -->
                        <tr>
                            <td>订单号</td>
                            <td colspan="2">产品名称</td>
                            <td>规格尺寸（mm）</td>
                            <td>数量</td>
                            <td colspan="2">物料号</td>
                        </tr>
                        <!-- 表格内容 -->
                        <tr v-for="(item, index) in props!.ownData!.orderData" :key="index">
                            <td>{{ item.orderNo }}</td>
                            <td colspan="2">{{ item.productName }}</td>
                            <td>{{ item.productSize }}</td>
                            <td>{{ item.deliveryQuantity }}</td>
                            <td colspan="2">{{ item.materialNumber }}</td>
                        </tr>
                        <tr>
                            <td>序号</td>
                            <td>检测项目</td>
                            <td colspan="3">技术要求</td>
                            <td colspan="2">检测结果</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>印刷</td>
                            <td colspan="3" class="text-left">盒面图案文字清晰、正确、深浅一致，位置正确整洁无套印，水平偏斜﹤5mm</td>
                            <td>合格</td>
                            <td rowspan="2">ROHS</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>压痕线</td>
                            <td colspan="3" class="text-left">
                                单瓦楞压痕线宽﹤12mm，双瓦楞压痕线宽﹤17mm，折线居中，没有破裂、断线、重线及多余压线
                            </td>
                            <td>合格</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>刀口</td>
                            <td colspan="3" class="text-left">无明显毛刺，裁刀口里面纸裂损距不超过5mm或长不超过10mm</td>
                            <td>合格</td>
                            <td rowspan="4">HF</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>粘盒</td>
                            <td colspan="3" class="text-left">应粘合牢固，纸盒之间不能粘连</td>
                            <td>合格</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>裱合</td>
                            <td colspan="3" class="text-left">盒面纸不许拼接、缺材、露楞、褶皱、透胶、污迹，脱胶面积每平方﹤20cm2</td>
                            <td>合格</td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>摇盖耐折</td>
                            <td colspan="3" class="text-left">纸盒成型后，摇盖开合180度，往复5次，面纸、里纸无裂缝</td>
                            <td>合格</td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>尺寸</td>
                            <td colspan="3" class="text-left">规格准确，偏差：±3mm</td>
                            <td>合格</td>
                            <td rowspan="3">GP</td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>含水率</td>
                            <td colspan="3" class="text-left">瓦楞纸箱含水率应为8%±2%</td>
                            <td>合格</td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>保质期</td>
                            <td colspan="3" class="text-left">2年</td>
                            <td>合格</td>
                        </tr>
                        <tr>
                            <td colspan="7" class="conclusion">结论：无不良产品</td>
                        </tr>
                        <tr>
                            <td colspan="7" class="remarks">备注：</td>
                        </tr>
                    </tbody>
                </table>
                <!-- 签名 -->
                <div class="signature">
                    <div class="inspector">检测员：</div>
                    <div></div>
                    <div class="auditor">审核员：</div>
                    <div></div>
                    <div class="delivery-date">送货日期：</div>
                    <div colspan="2"></div>
                </div>
            </div>

            <!-- 自定义产品标签 -->
            <div v-show="labelData.length > 0">
                <el-button class="mb-2" type="primary" @click="printProductLabel">打印</el-button>
                <div id="print-product-label">
                    <!-- 产品标签展示 -->
                    <table class="print-product-table" v-for="(item, index) in labelData" :key="index">
                        <thead>
                            <tr>
                                <th colspan="4" class="print-table-title">产 品 标 签</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>订单号：</td>
                                <td colspan="3">{{ item.orderNo.join(',') }}</td>
                            </tr>
                            <tr>
                                <td>物料号：</td>
                                <td colspan="3">{{ item.materialNumber || '/' }}</td>
                            </tr>
                            <tr>
                                <td>产品名称：</td>
                                <td colspan="3" class="print-table-productName">{{ item.productName }}</td>
                            </tr>
                            <tr>
                                <td>规格尺寸（mm）</td>
                                <td colspan="3">{{ item.productSize }}</td>
                            </tr>
                            <tr>
                                <td>数量：</td>
                                <td colspan="3">
                                    {{ item.deliveryQuantity.length > 1 ? item.deliveryQuantity.join('+') : item.deliveryQuantity[0] }}
                                </td>
                            </tr>
                            <tr>
                                <td>备注：</td>
                                <td colspan="3"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { getCustomerById } from '@/api/customer';
import { useSystemStore } from '@/store/modules/system';
import { CircleCloseFilled, ArrowDown } from '@element-plus/icons-vue';
import { creatRandomNo, formatTimeZone } from '@utils/calculate';
import { printOutBound } from '@/api/outbound';
import { HttpUrl } from '@api/httpUrl';
import { checkPermi } from '@/utils/permission';
import html2canvas from 'html2canvas';
import printJS from 'print-js';
import Nzh from 'nzh/cn';
import dayjs from 'dayjs';
import QRCode from 'qrcode';
import './printOWN.css';
import './printOutboundLabel.css';

/* ***********************************组件属性/方法*********************************** */
// 定义 model
const printOWNOutboundVisible = defineModel('printOWNOutboundVisible', { type: Boolean, required: true, default: false });
// 定义 props
const props = defineProps<{
    // 打印出库单的数据
    ownData: AjaxResponse['outBoundList'][0] | undefined;
}>();

/* ***********************************通用属性/方法*********************************** */
// 获取系统配置
const useSystem = useSystemStore();
// 路由
const router = useRouter();

// 客户名称
const customerName = ref('');
// 打印时间
const printTime = ref<Date>(new Date());
// 送货地址
const customerAddress = ref('');
// 联系方式
const customerPhone = ref('');
// 打印数据
const printData = ref<AjaxResponse['outBoundList'][0]>({
    _id: '',
    createType: 'system',
    customerId: '',
    deliveryDate: '',
    outbound: false,
    printTimes: 0,
    orderData: [],
});

// 标签数据类型
type LabelData = {
    orderNo: string[];
    materialNumber: string;
    productName: string;
    productSize: number;
    deliveryQuantity: number[];
}[];
// 标签数据
const labelData = reactive<LabelData>([]);
// 如果需要打印金额，则需要知道金额在第几列
const priceColumn = computed(() => {
    return checkList.value.length - 1;
});
// 产品出厂报告显示隐藏
const showFactoryInspectionReport = ref(false);
// 产品出厂检测报告编号
const factoryInspectionReportNo = ref('');

// 初始化打印事件
const initPrintEvent = () => {
    // 没有过检，则提示前往设置
    if (useSystem.checkPrintSetting().type == 'warning') {
        // 弹窗提示
        ElMessageBox.confirm(useSystem.checkPrintSetting().message, '提示', {
            confirmButtonText: '是',
            cancelButtonText: '取消',
            showClose: false,
            type: 'warning',
        })
            .then(() => {
                // 权限验证
                if (!checkPermi(['system:config'])) {
                    // 提示
                    ElMessage.error('没有权限');
                    return;
                }
                router.push({ name: 'SystemConfig' });
            })
            .catch(() => {
                printOWNOutboundVisible.value = false;
            });
    } else {
        // 清空数据
        printData.value = {
            _id: '',
            createType: 'system',
            customerId: '',
            deliveryDate: '',
            outbound: false,
            printTimes: 0,
            orderData: [],
        };

        // 通过客户id获取客户信息
        getCustomerById(props.ownData!.customerId).then((res) => {
            customerName.value = res.data.customerName;
            customerAddress.value = res.data.customerAddress;
            customerPhone.value = res.data.customerPhone;
        });

        // 转移数据
        printData.value!._id = props.ownData!._id;
        printData.value!.createType = props.ownData!.createType;
        printData.value!.customerId = props.ownData!.customerId;
        printData.value!.deliveryDate = props.ownData!.deliveryDate;
        printData.value!.outbound = props.ownData!.outbound;
        printData.value!.printTimes = props.ownData!.printTimes;
        props.ownData!.orderData.forEach((item) => {
            printData.value!.orderData.push(item);
        });

        // 格式化打印数据
        if (props.ownData!.orderData.length < 5) {
            // 如果打印内容不足五行，则补齐空白
            const length = 5 - props.ownData!.orderData.length;
            for (let i = 0; i < length; i++) {
                // 将空数据添加到数组中
                printData.value!.orderData.push({
                    orderId: '',
                    orderNo: '',
                    materialNumber: '',
                    productId: '',
                    productName: '',
                    productSize: '',
                    orderNumber: 0,
                    deliveryQuantity: 0,
                    unit: '',
                    price: 0,
                    subtotal: 0,
                    remark: '',
                });
            }
        }

        // 生成出厂检测报告编号
        factoryInspectionReportNo.value = new creatRandomNo().id;

        // 生成二维码
        const qrFactoryInspectionReport = document.getElementById('qr-factory-inspection-report');

        // 如果已经上传过二维码
        if (props.ownData!.report) {
            // 覆盖生成出厂检测报告编号
            factoryInspectionReportNo.value = props.ownData!.report.split('/')[props.ownData!.report.split('/').length - 1].split('.')[0];
            // url
            const qrUrl = `${import.meta.env.VITE_APP_PUBLIC_SERVER_URL}${props.ownData!.report}`;
            // 生成二维码
            QRCode.toCanvas(qrFactoryInspectionReport, qrUrl, function (error) {
                if (error) {
                    ElMessage.error('生成二维码失败');
                }
            });
            return;
        }

        // 如果没有上传过二维码，则生成二维码并上传至服务器
        QRCode.toCanvas(
            qrFactoryInspectionReport,
            `${import.meta.env.VITE_APP_PUBLIC_SERVER_URL}/检验报告/${dayjs().format('YYYY-MM')}/${factoryInspectionReportNo.value}.png`,
            function (error) {
                if (error) {
                    ElMessage.error('生成二维码失败');
                }
            }
        );
    }
};

// 定义需要打印的数据
type CheckList =
    | 'priority'
    | 'orderNo'
    | 'meterialNumber'
    | 'productName'
    | 'productSize'
    | 'orderNumber'
    | 'deliveryQuantity'
    | 'unit'
    | 'price'
    | 'remark'
    | 'qrcode'
    | 'batchNumber';
// 定义需要打印的数据 -- 默认值
const checkList = ref<CheckList[]>(['priority', 'productName', 'orderNumber', 'deliveryQuantity', 'unit', 'price', 'remark']);
// 所有打印的数据列表
const allList = [
    {
        label: '编号',
        value: 'priority',
        disabled: true,
    },
    {
        label: '订单号',
        value: 'orderNo',
        disabled: false,
    },
    {
        label: '物料号',
        value: 'meterialNumber',
        disabled: false,
    },
    {
        label: '产品名称',
        value: 'productName',
        disabled: true,
    },
    {
        label: '产品尺寸',
        value: 'productSize',
        disabled: false,
    },
    {
        label: '订单数量',
        value: 'orderNumber',
        disabled: false,
    },
    {
        label: '送货数量',
        value: 'deliveryQuantity',
        disabled: false,
    },
    {
        label: '单位',
        value: 'unit',
        disabled: false,
    },
    {
        label: '金额',
        value: 'price',
        disabled: false,
    },
    {
        label: '备注',
        value: 'remark',
        disabled: false,
    },
    {
        label: '二维码',
        value: 'qrcode',
        disabled: false,
    },
    {
        label: '生产批号',
        value: 'batchNumber',
        disabled: false,
    },
];

// 检测是否勾选
const checkListChecked = (key: CheckList) => {
    return checkList.value.findIndex((i) => i == key) != -1 ? true : false;
};

// 打印选项改变事件
const handleOptionsChange = (val: any[]) => {
    let symbol = false;
    // 如果val中含有qrcode
    val.some((item) => {
        if (item == 'qrcode') {
            symbol = true;
            return true;
        }
    });

    // 如果有生产批号
    if (val.some((item) => item == 'batchNumber')) {
        // 遍历printData.orderData
        printData.value.orderData.forEach((item) => {
            // 如果有产品名称，则添加生产批号
            if (item.productName) {
                item.remark =
                    item.remark.replace(/生产日期20250602 保质期2年（生产批号：.*）/, '') +
                    `生产日期20250602 保质期2年（生产批号：${factoryInspectionReportNo.value}）`;
            }
        });
    }

    // 如果没有生产批号
    if (!val.some((item) => item == 'batchNumber')) {
        // 遍历printData.orderData
        printData.value.orderData.forEach((item) => {
            item.remark = item.remark.replace(/生产日期20250602 保质期2年（生产批号：.*）/, '');
        });
    }

    const qrFactoryInspectionReport = document.getElementById('qr-factory-inspection-report');
    // 如果已经上传过二维码
    if (symbol && props.ownData!.report !== '') {
        // url
        const qrUrl = `${import.meta.env.VITE_APP_PUBLIC_SERVER_URL}${props.ownData!.report}`;
        QRCode.toCanvas(qrFactoryInspectionReport, qrUrl, function (error) {
            if (error) {
                ElMessage.error('生成二维码失败');
            }
        });
    }
    // 如果没有上传过二维码，则生成二维码并上传至服务器
    if (symbol && props.ownData!.report == '') {
        QRCode.toCanvas(
            qrFactoryInspectionReport,
            `${import.meta.env.VITE_APP_PUBLIC_SERVER_URL}/检验报告/${dayjs().format('YYYY-MM')}/${factoryInspectionReportNo.value}.png`,
            function (error) {
                if (error) {
                    ElMessage.error('生成二维码失败');
                }
            }
        );
    }
};

// 打印送货单事件
const printDeliveryEvent = () => {
    // 打印送货单
    printJS({
        printable: 'print-container',
        type: 'html',
        scanStyles: false,
        css: import.meta.env.VITE_APP_PRINT_DELIVERY_OWN,
    });

    // 更新订单以及出库数据
    printOutBound(props.ownData!._id, printTime.value).then((res) => {
        // 更新提示
        ElNotification({
            title: '系统提示',
            message: res.message,
            type: 'success',
        });

        // 如果已经打印了，则不更新出厂检测报告
        // if (res.code == 201) {
        //     // 关闭弹窗
        //     printOWNOutboundVisible.value = false;
        //     return;
        // }

        // 并将出厂报告上传至服务器
        html2canvas(document.querySelector('#print-factory-inspection-report') as HTMLElement).then((canvas) => {
            // 默认格式image/png
            canvas.toBlob(async (blob) => {
                if (blob) {
                    // 准备上传的数据
                    const formData = new FormData();
                    formData.append('file', blob, factoryInspectionReportNo.value + '.png');
                    formData.append('outboundId', props.ownData!._id);
                    try {
                        const response = await fetch(
                            import.meta.env.VITE_APP_UPLOAD_URL + import.meta.env.VITE_APP_BASE_API + HttpUrl.uploadOutBoundReport,
                            {
                                method: 'POST',
                                body: formData,
                            }
                        );

                        if (response.ok) {
                            // 更新提示
                            ElNotification({
                                title: '系统提示',
                                message: '出厂报告生成并上传成功',
                                type: 'success',
                            });
                            // 关闭弹窗
                            printOWNOutboundVisible.value = false;
                        }
                    } catch (error) {
                        // 关闭弹窗
                        printOWNOutboundVisible.value = false;
                        ElMessage.error('网络错误');
                    }
                } else {
                    // 关闭弹窗
                    printOWNOutboundVisible.value = false;
                    ElMessage.error('出厂报告上传服务器失败');
                }
            });
        });
    });
};

// 打印出厂检测事件
const printFactoryInspectionReportEvent = () => {
    printJS({
        printable: 'print-factory-inspection-report',
        type: 'html',
        scanStyles: false,
        css: import.meta.env.VITE_APP_PRINT_FACTORY_INSPECTION_REPORT,
    });
};

// 打印产品标签时间
const printProductLabelEvent = (isSame: boolean) => {
    labelData.length = 0;
    if (isSame) {
        const m = new Map();
        // 重复产品名称提取
        props.ownData!.orderData.forEach((item) => {
            if (m.has(item.productName)) {
                m.get(item.productName).deliveryQuantity.push(item.deliveryQuantity);
                m.get(item.productName).orderNo.push(item.orderNo);
            } else {
                m.set(item.productName, {
                    productName: item.productName,
                    orderNo: [item.orderNo],
                    materialNumber: item.materialNumber,
                    productSize: item.productSize,
                    deliveryQuantity: [item.deliveryQuantity],
                });
            }
        });
        // 转换为数组
        Array.from(m, ([_k, v]) => {
            labelData.push(v);
        });
    }
};
// 打印产品标签事件
const printProductLabel = () => {
    printJS({
        printable: 'print-product-label',
        type: 'html',
        scanStyles: false,
        css: import.meta.env.VITE_APP_PRINT_OUTBOUND_LABEL,
    });
};
</script>

<style scoped lang="scss">
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}

table {
    border-collapse: collapse;
    border: 1px solid rgb(140 140 140);
    letter-spacing: 1px;
}

th,
td {
    border: 1px solid rgb(160 160 160);
    padding: 6px 8px;
}

// 打印出产检测报告样式
#print-factory-inspection-report {
    width: 70%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.report-title {
    font-size: 24px;
    font-weight: bold;
}

.report-subtitle {
    font-size: 18px;
    font-weight: bold;
}

.report-No {
    text-align: right;
}

.conclusion {
    text-align: left;
    height: 70px;
}

.remarks {
    text-align: left;
    height: 70px;
}

.signature {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-around;
}
</style>
